<?PHP
    $pp_path=".";
    include_once ($pp_path."/common.php");
?>
<!DOCTYPE HTML>
<html>
<head>
    <title>PLAYPLUS</title>
    <link href="/css/jquery-ui-1.10.2.custom.min.css" rel="stylesheet" />
    <style>
        * { font-family: "Dotum", "Dotumche", "돋움", "돋움체"; font-size: 12px; color: #7D7D7D; }
		html { height: 100%; }
		body { width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: #FFF; }
		div { position: relative; }
        iframe { border: none; }

        #wrap { margin: 0px auto; width: 1200px; }
        #header { margin: 0px auto; width: 100%; height: 50px; }
        #lnb { float: left; margin: 0px auto; width: 19%; min-height: 300px; }
        #lnb li { cursor: pointer; height: 20px; line-height: 20px; }
        #contents { float: right; margin: 0px auto; width: 79%; min-height: 500px; }
        #footer { margin: 0px auto; width: 100%; height: 100px; bottom: 0px; }

        .clear { clear: both; }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header"></div>
        <div id="lnb">
            <h3>COMMON</h3>
            <ul>
                <li id="list" class="btn_api">List API</li>
                <li id="regist" class="btn_api">Regist API</li>
            </ul>
            <?PHP
                $query="SELECT p_code, p_name FROM gcm_project";
                $result=$mysql->query($query);

                while($row=$mysql->fetch_array($result)) {
                    echo "<h3>{$row['p_name']}</h3>\n";
                    echo "<ul>\n";
                    echo "<li id=\"{$row['p_code']}\" class=\"btn_gcm\">Google Cloud Message</li>\n";
                    echo "<li id=\"{$row['p_code']}\" class=\"btn_gcmresult\">Send Result</li>\n";
                    echo "<li id=\"{$row['p_code']}\" class=\"btn_device\">Device List</li>\n";
                    echo "</ul>\n";
                }
            ?>
        </div>
        <div id="contents">
            <h3 id="div_title">GAME #3</h3>
            <div id="div_frame">
                <iframe id="frame" style="width: 100%; height: 500px;"></iframe>
            </div>
        </div>
    </div>
    <script src="/script/jquery-1.9.1.js"></script>
    <script src="/script/jquery-ui-1.10.2.custom.min.js"></script>
    <script>
    $(function(){
        $("#lnb").accordion({ heightStyle: "content" });
        $("#contents").accordion();
        $(".btn_api").click(function(){
            switch ($(this).attr("id")) {
                case "list" :
                    var url="/api.inc.php";
                break;
                case "regist" :
                    var url="/apiregist.inc.php";
                break;
            }
            $("#div_title").text($(this).text());
            frameResize("frame", "<?PHP echo $pp['inc_path']; ?>"+url);
        });
        $(".btn_gcm").click(function(){
            $("#div_title").text($(this).text());
            frameResize("frame", "<?PHP echo $pp['inc_path']; ?>/gcm.inc.php?p_code="+$(this).attr("id"));
        });
        $(".btn_gcmresult").click(function(){
            $("#div_title").text($(this).text());
            frameResize("frame", "<?PHP echo $pp['inc_path']; ?>/result.inc.php?p_code="+$(this).attr("id"));
        });
        $(".btn_device").click(function(){
            $("#div_title").text($(this).text());
            frameResize("frame", "<?PHP echo $pp['inc_path']; ?>/device.inc.php?p_code="+$(this).attr("id"));
        });
    });

    function frameResize(frame, src) {
        $("#"+frame).attr("src", src).load(function(){
            $(this).css("height", "0");
            h=$(this).contents().height();
            $(this).css("height", h);
            $("#div_"+frame).css("height", h+5);
        });
    }
    </script>
</body>
</html>